<template>
  <div >

    <div class="filter-container hs-bg-card hs-panel">
      <el-input @keyup.enter.native="handleFilter" style="width: 200px" class="filter-item"
                v-model="listQuery.name"> </el-input>
      <el-button class="filter-item" type="primary" icon="search" @click="handleFilter">搜索</el-button>
      <el-button class="filter-item"
                 v-permission="'menu:add'"
                 style="float:right" @click="handleAdd"
                 type="primary" icon="el-icon-plus" circle>
      </el-button>
      <el-button style="float:right" type="success" icon="el-icon-download" v-permission="'menu:export'"
                 circle @click="handleDownload()">
      </el-button>
    </div>

    <div class="hs-bg-card hs-panel mt-2">
      <el-table :data="tableData"
                  border
                  highlight-current-row
                  height="600"
                  style="margin: 10px 0;">
          <el-table-column type="index" width="50" label="序号">
          </el-table-column>
          <el-table-column width="160" label="名称" prop="name">
            <template slot-scope="scope">
              <div v-bind:class="'column_level_' + scope.row.level">
                <el-button type="text" v-if="scope.row.children"
                           @click="handleToggle(scope.row)">
                  <i v-if="scope.row._expanded" class="el-icon-caret-bottom" aria-hidden="true"></i>
                  <i v-else class="el-icon-caret-right" aria-hidden="true"></i>
                  <span>{{scope.row.name}} </span>
                </el-button>
                <span v-else style="margin-left:20px"> {{scope.row.name}} </span>
              </div>
            </template>
          </el-table-column>
          <el-table-column width="100" label="编号" prop="code">
          </el-table-column>
          <el-table-column width="50" align="center" label="图标" prop="code">
            <template slot-scope="scope">
              <i :class="'fa ' + scope.row.icon" style="font-size: 16px"></i>
            </template>
          </el-table-column>
          <el-table-column width="70" align="center" label="类型">
            <template slot-scope="scope">
              <el-tag :type="scope.row.type==1 ? 'primary':'warning'"> {{scope.row.type==1 ? "菜单":"按钮"}}</el-tag>
            </template>
          </el-table-column>
          <el-table-column width="150" label="权限" prop="permission">
          </el-table-column>
          <el-table-column width="180" label="资源路径" prop="url">
          </el-table-column>
          <el-table-column width="155" align="center" label="最后更新" prop="updatedAt">
          </el-table-column>
          <el-table-column align="center" label="操作" width="100">
            <template slot-scope="scope">
              <el-button v-permission="'menu:update'" size="small" type="success" icon="el-icon-edit" circle
                         @click="handleUpdate(scope.row)">
              </el-button>
              <el-button v-permission="'menu:delete'" size="small" type="danger" icon="el-icon-delete" circle
                         @click="handleDelete(scope.row)">
              </el-button>
            </template>
          </el-table-column>
        </el-table>
    </div>

    <el-dialog :title="textMap[editDialog.type]"
               :visible.sync="editDialog.show">
      <menu-edit
        :modelData="editModel"
        ref="editMenu"
        @cancel="editDialog.show = false"
        @complete="handleEditComplete"></menu-edit>
    </el-dialog>
  </div>
</template>
<script>
import { treeList, delObj } from 'api/admin/menu'
const MenuEdit = r => require.ensure([], () => r(require('./components/MenuEdit.vue')), 'group-menu-edit')

export default {
  name: 'MenuManage',
  components: {
    MenuEdit
  },
  data () {
    return {
      listQuery: {},
      originTaleData: [],
      tableData: [],
      currentId: -1,
      editModel: {},
      editDialog: {
        show: false,
        type: undefined
      },
      textMap: {
        update: '正在编辑',
        create: '正在创建'
      }
    }
  },
  watch: {
    filterText (val) {
      this.$refs.menuTree.filter(val)
    }
  },
  created () {
    this.getList()
  },
  methods: {
    getList () {
      treeList().then(response => {
        let data = response.data
        this.originTaleData = data
        this.makeData()
      })
    },
    handleToggle (row) {
      let id = row.id
      this.filterData(id)
    },
    handleEditComplete () {
      this.editDialog.show = false
      this.getList()
    },
    handleUpdate (row) {
      this.editDialog.show = true
      this.editDialog.type = 'update'
      this.$nextTick(() => {
        this.$refs.editMenu.setModel(row)
      })
    },
    handleAdd () {
      this.editDialog.show = true
      this.editDialog.type = 'create'
      this.$nextTick(() => {
        this.$refs.editMenu.setModel(null)
      })
    },
    handleDelete (row) {
      this.currentId = row.id
      this.$confirm('该操作将永久删除这条菜单, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        delObj(this.currentId).then(() => {
          this.getList()
          this.$message.success('删除成功')
        })
      })
    },
    makeData () {
      let data = []
      let len = this.originTaleData.length
      for (let i = 0; i < len; i++) {
        let item = this.originTaleData[i]
        item._expanded = true
        data.push(item)
      }
      this.tableData = data
    },
    filterData (changed) {
      let show = true
      let level = 1
      let data = []
      let len = this.originTaleData.length
      for (let i = 0; i < len; i++) {
        let item = this.originTaleData[i]
        if (item.id === changed) {
          item._expanded = !item._expanded
        }
        if (show) {
          data.push(item)
          if (item.children) {
            level = item.level
            show = item._expanded
          }
          if (item.level < level) {
            level = item.level
            show = item._expanded
          }
        } else {
          if (item.level <= level) {
            show = item._expanded
            level = item.level
            data.push(item)
          }
        }
      }
      this.tableData = data
    }
  }
}
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
  .column_level_2 {
    padding-left: 10px;
  }
  .column_level_3 {
    padding-left: 20px;
  }
  .column_level_4 {
    padding-left: 30px;
  }
</style>
